html{
    /* height: 100%; */
}
body {
    text-align: center;
    background: url(./webImgs/bg6.jpg);
    /* opacity: 0.1; */
    /* filter: blur(3px); */
    /* background-size: inherit;
    background-repeat: inherit; */
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#head {
    width: 100%;
    /* width: 800px; */
    height: 450px;
    /* margin: auto; */
    /* border: solid 1px red; */
    display: block;
    background: url(./webImgs/bg12.jpg) no-repeat;
    opacity: 0.7;
    /* background-size: 100% 100%; */
    background-size: 100% 80%;
    background-attachment: fixed;
    /*设置背景图像是否固定或者随着页面的其余部分滚动*/
}

/* search bar starts */

#searchbar {
    text-align: center;
    height: 100%;
    width: 100%;
}

#tag {
    margin-top: 10px;
    margin-bottom: 10px;
}

.input_bar {
    /* border-radius: 20px; */
    border: #CDCD00 2.25px solid;
    margin-top: 5px;
    border-radius: 4px;
    background-color: #FFFFF0;
}

input::-webkit-input-placeholder {
    /*color: yellowgreen;*/
    color: #B3EE3A;
    font-size: 16px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}


.search_button {
    height: 50px;
    width: 75px;
    /* background: url(./search1.1.png); */
    background-color: #A2CD5A;
    border: #6E8B3D 1px solid;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 15px;
    outline: none;
}

button:hover {
    /* font-size: 18px; */
    font-weight: bold;
    /* width: 70px; */
}

/* search bar emds */

/*选项卡*/
li {
    list-style: none;
}

* {
    margin: 0px;
    padding: 0px;
}

#tab {
    position: relative;
    /* width: 1000px;
    height: 500px; */
    width: 60%;
    height: auto;
    margin: 50px auto;
    /* border: 1px solid green; */
    /* filter:opacity(20%); */

}

.list{
    text-align: center;
}
.list_nav {
    /* float: left; */
    display: inline-block;
    width: 200px;
    height: 50px;
    /* border-right: 1px solid red; */
    /* background-color: #eee; */
    background-color: rgb(255, 245, 238,0.8);
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-top-right-radius: 16px;
}

.list_nav :hover {
    cursor: pointer;
    opacity: 0.4;
}

.active {
    /* background-color: rgb(255, 250, 204); */
    background-color: rgba(142, 163, 22, 0.8);
}

.tab_nav {
    display: none;
    /* position: absolute; */
    top: 50px;
    width: 100%;
    height: 350px;
    /* background-color: rgba(255, 250, 204, 0.582); */
}

.on {
    display: block;
}
/*选项卡*/
p{
    color: whitesmoke; 
    font-size: 20px;
}
/* img{
    width:150px;
    height:150px;
}
img:hover {
    width: 170px;
    height: 170px;
} */
.divmax{
    padding-top: 10px; 
    border:green solid 2px; 
    margin-top: 30px;
    background:rgba(120, 90, 100, 0.5);

}
.divmin{
    display: inline-block;
}

/*响应性布局*/
@media only screen and (max-width: 420px) {
    .in_tag {
        border: 1px solid gray;
        padding: 5px;
        line-height: 20px;
        text-decoration: none;
        color: grey;
    }
    .input_bar {
        height: 30px;
        width: 220px;
        font-size: 10px;
        text-align: left;
    }
    img{
        width:90px;
        height:90px;
    }
    img:hover {
        width: 110px;
        height: 110px;
    }
    .divmax{
        height: 110px;
        width: 500px;
    }
}

@media only screen and (min-width: 420px) {
    .in_tag {
        border: 1px solid gray;
        padding: 5px;
        line-height: 20px;
        text-decoration: none;
        color: grey;
    }
    .input_bar {
        height: 50px;
        width: 60%;
        font-size: 20px;
        text-align: left;
    }

}


@media only screen and (min-width: 420px) and (max-width: 800px) {
    img{
        width:120px;
        height:120px;
    }
    img:hover {
        width: 140px;
        height: 140px;
    }
    .divmax{
        height: 150px;
        width: 700px;
    }

}

@media only screen and (min-width: 800px) {
    img{
        width:150px;
        height:150px;
    }
    img:hover {
        width: 170px;
        height: 170px;
    }
    .divmax{
        height: 180px;
        width: 800px;
    }

}




